import React, { Component } from 'react';

import './index.scss';

class TableBodyCon extends Component {

  render() {
    const { courseCollectionData, onStatusClick } = this.props;
    return (
      <tbody>
        {
          courseCollectionData.map((item, index) => {
            return (
              <tr key={index}>
                <td>{item.id}</td>
                <td className="qq-link">
                  <a href={item.qqQunLink}
                    target="_blank"
                    rel="noopener noreferrer">
                    {item.qqQunLink}
                  </a>
                </td>
                <td>
                  <a href={item.href}
                    target='_blank'
                    rel="noopener noreferrer">
                    <img
                      className="collection-img"
                      src={`http://tximg.wujinhui.xyz/${item.posterKey}`}
                      alt={item.title} />
                  </a>
                </td>
                <td className="course-name ellipsis">
                  <a href={item.qqQunLink}
                    target="_blank"
                    rel="noopener noreferrer">
                    {item.title}
                  </a>
                </td>
                <td>
                  {item.info}
                </td>
                <td>
                  <button
                    className={['btn', item.status ? ' btn-danger' : ' btn-success'].join('')}
                    onClick={() => onStatusClick( item.id, index)}>
                    {item.status ? '下架' : '上架'}
                  </button>
                </td>
              </tr>
            )
          })
        }
      </tbody>
    )
  }
}

export default TableBodyCon;